<template>
	<view class="schedule-module">
		<view class="title-content">
			<view class="tab-content">
				<view @click="init(0)" :class="[typeIndex === 0 ? 'active' : '']" class="tab-item">进度统计</view>
				<view @click="init(1)" :class="[typeIndex === 1 ? 'active' : '']" class="tab-item">每日进度</view>
			</view>
			<view @click="goScheduleChart" class="label">进度图表</view>
		</view>
		
		<view v-if="typeIndex === 0" class="statistics-list">
			<view v-if="!projectArray.length" style="padding-bottom: 40px;">
				<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
			</view>
			<view
				v-for="(item, index) in projectArray" 
				:key="index" 
				class="statistics-item" 
				:class="[['gh', 'xgh'].includes(item.constructionMethod) ? 'blue-item' : ['snwrd', 'swwrd'].includes(item.constructionMethod) ? 'orange-item' : 'green-item']"
			>
				<view class="item-top">
					<view class="item-icon">
						<image class="blue-image" src="../../../../../subpackage-overhaul/static/icon-style-1.png"></image>
						<image class="orange-image" src="../../../../../subpackage-overhaul/static/icon-style-2.png"></image>
						<image class="green-image" src="../../../../../subpackage-overhaul/static/icon-style-3.png"></image>
					</view>
					<view class="item-data">
						<view class="schedule">
							<view class="schedule-background" :style="{width: `${item.schedule}%`}"></view>
						</view>
						<view class="text-content">
							<view>{{ item.label }}</view>
							<view>{{ item.schedule }}%</view>
						</view>
						<view v-if="['gh', 'xgh', 'snwrd', 'swwrd'].includes(item.constructionMethod)" class="text-content">
							<view>计划{{ item.plannedWorkload || '0.00' }}{{ ['gh', 'xgh'].includes(item.constructionMethod) ? '环' : '孔次' }}</view>
							<view>实际{{ item.actualWorkload || '0.00' }}{{ ['gh', 'xgh'].includes(item.constructionMethod) ? '环' : '孔次' }}</view>
						</view>
					</view>
				</view>
				
				<view class="item-bottom">
					<view>
						<view class="label">计划产值</view>
						<view class="num">
							<text>{{ item.plannedOutputValue || '0.00' }}</text>
							<text>元</text>
						</view>
					</view>
					<view>
						<view class="label">计划产值</view>
						<view class="num">
							<text>{{ item.actualOutputValue || '0.00' }}</text>
							<text>元</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="typeIndex === 1" class="everyday-schedule">
			<view @click="calendarVisible = true" class="select-date">
				<text :class="[!currentDateValue ? 'gray-label' : '']">{{ currentDateValue ? currentDateValue : '请选择日期' }}</text>
				<image src="../../../../../subpackage-overhaul/static/icon-style-4.png"></image>
			</view>
			<view v-if="!projectArray.length" style="padding: 54px 0 40px;">
				<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
			</view>
			<view v-for="(item, index) in projectArray" :key="index" class="schedule-item" :class="[['gh', 'xgh'].includes(item.constructionMethod) ? 'blue-item' : ['snwrd', 'swwrd'].includes(item.constructionMethod) ? 'orange-item' : 'green-item']">
				<view class="title">{{ item.label }}</view>
				<view class="table">
					<view class="table-header">
						<view style="flex: 1;">工序</view>
						<view style="width: 50px;">工作量</view>
						<view style="width: 60px;">单价/元</view>
						<view style="width: 60px;">产值/元</view>
					</view>
					<view v-for="(item1, index1) in item.children" :key="index1" class="table-body">
						<view style="flex: 1;">{{ item1.steelRingProcedureName }}</view>
						<view style="width: 50px;">{{ item1.totalWorload || 0  }}{{ item1.unit }}</view>
						<view style="width: 60px;">{{ item1.priceStr }}</view>
						<view style="width: 60px;">{{ item1.outputValueStr }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<u-datetime-picker v-if="currentDateValueTime || calendarVisible" v-model="currentDateValueTime"  @cancel="calendarVisible = false" @confirm="confirmCalendar" :show="calendarVisible" mode="date" :maxDate="dateModel.end"></u-datetime-picker>
	</view>
</template>

<script>
	import { reserveDecimalPoint } from "@/utils/common.js"
	import { handleFormatDate } from "@/utils/date.js"
	import { pmprPmProcessReportDateList, selectWorkloadListByIdAndDate, getListByLineSiteSectionId } from "@/api/comprehensive/comprehensive.js"
	
	export default {
		inject: ['getProjectStatisticsData', 'getId', 'getLineArray'],
		data() {
			return {
				// 当前选择的类型
				typeIndex: 0,
				// 展示的数据列表
				projectArray: [],
				// 日期弹框是否可见
				calendarVisible: false,
				// 当前日期的值
				currentDateValue: null,
				// 当前日期的值
				currentDateValueTime: null,
				// 日期数据
				dateModel: {
					end: 0,
					monthNum: 60
				},
			}
		},
		mounted() {
			const year = new Date().getFullYear()
			this.dateModel.end = new Date(`${year + 2}-01-01`).getTime()
		},
		methods: {
			/** 初始化 */
			init(index = undefined) {
				if (index !== undefined) {
					if (this.typeIndex === Number(index)) {
						return
					}
					this.typeIndex = Number(index)
				}
				this.currentDateValue = ''
				this.projectArray = []
				// 进度统计
				if (this.typeIndex === 0) {
					this.initScheduleStatistics()
				}
				else if (this.typeIndex === 1) {
					this.initEverydaySchedule()
				}
			},
			
			/** 确认日期筛选 */
			confirmCalendar(event) {
				const { value } = event
				this.calendarVisible = false
				this.projectArray = []
				this.currentDateValue = value ? handleFormatDate(new Date(value)) : undefined
				if (this.typeIndex === 0) {
					this.initScheduleStatistics()
				}
				else if (this.typeIndex === 1) {
					this.getScheduleList()
				}
			},
			
			/** 初始化进度统计数据 */
			initScheduleStatistics() {
				const projectArray = []
				const data = this.getProjectStatisticsData().completionRate
				if (data) {
					const codeArray = [
						{ label: '大钢环', code: 'gh' },
						{ label: '小钢环', code: 'xgh' },
						{ label: '隧内微扰动', code: 'snwrd' },
						{ label: '隧外微扰动', code: 'swwrd' },
						{ label: '维保类', code: 'wbl' },
						{ label: '前期工作', code: 'qqgz' },
						{ label: '其他', code: 'other' }
					]
					for (const item of codeArray) {
						if (data[item.code]) {
							projectArray.push({
								label: item.label,
								constructionMethod: data[item.code].constructionMethod,
								actualWorkload: reserveDecimalPoint(data[item.code].actualWorkload || 0, 10000000000, '9999999999.99'),
								plannedWorkload: reserveDecimalPoint(data[item.code].plannedWorkload || 0, 10000000000, '9999999999.99'),
								actualOutputValue: reserveDecimalPoint(data[item.code].actualOutputValue || 0, 10000000000, '9999999999.99'),
								plannedOutputValue: reserveDecimalPoint(data[item.code].plannedOutputValue || 0, 10000000000, '9999999999.99'),
								schedule: parseInt(parseInt(data[item.code].completionRate * 10000) / 100) || 0
							})
						}
					}
				}
				this.projectArray = projectArray
			},
			
			/** 初始化每日进度数据 */
			async initEverydaySchedule() {
				await this.getScheduleDate()
				this.getScheduleList()
			},
			
			/** 获取日期数据 */
			getScheduleDate() {
				return new Promise(resolve => {
					this.currentDateValue = null
					if (!this.getId()) {
						return
					}
					pmprPmProcessReportDateList({ id: this.getId() }).then(res => {
						if (res && res.result && res.result.length) {
							const dateArray = []
							const tempArray = res.result.map(item => handleFormatDate(new Date(item.constructionDate)))
							for (const item of tempArray) {
								if (!dateArray.includes(item)) {
									dateArray.push(item)
								}
							}
							this.dateArray = dateArray
							const tempDate = Math.max(...res.result.map(item => new Date(item.constructionDate).getTime())) || null
							if (tempDate) {
								this.currentDateValue = handleFormatDate(new Date(tempDate)) || undefined
								console.log(this.currentDateValue, '日期')
								this.currentDateValueTime = tempDate
							}
						}
					}).finally(() => {
						resolve()
					})
				})
			},

			/** 获取进度列表 */
			getScheduleList() {
				this.projectArray = []
				if (!this.getId() || !this.currentDateValue) {
					return
				}
				selectWorkloadListByIdAndDate({
					bpId: this.getId(),
					startTime: new Date(`${this.currentDateValue} 00:00:00`).getTime(),
					endTime: new Date(`${this.currentDateValue} 23:59:59`).getTime()
				}).then(res => {
					const tempArray = [
						{ label: '大钢环', code: 'gh', children: [] },
						{ label: '小钢环', code: 'xgh', children: [] },
						{ label: '隧内微扰动', code: 'snwrd', children: [] },
						{ label: '隧外微扰动', code: 'swwrd', children: [] },
						{ label: '维保类', code: 'wbl', children: [] },
						{ label: '前期工作', code: 'qqgz', children: [] },
						{ label: '其他', code: 'other', children: [] }
					]
					for (const item of res.result) {
						const index = tempArray.findIndex(item1 => item1.code === item.constructionMethod)
						if (index !== -1) {
							let unit = ''
							if (['gh', 'xgh'].includes(tempArray[index].code)) {
								unit = '环'
							} else if (['snwrd', 'swwrd'].includes(tempArray[index].code)) {
								unit = '孔次'
							}
							tempArray[index].constructionMethod = item.constructionMethod
							tempArray[index].children.push({
								...item,
								unit,
								totalWorload: (parseInt(parseInt(item.totalWorload * 10000) / 100) / 100) || 0,
								outputValueStr: parseInt(parseInt(item.outputValue * 10000) / 100) / 100 || 0,
								priceStr: parseInt(parseInt(item.price * 10000) / 100) / 100 || 0
							})
						}
					}
					for (let i = 0; i < tempArray.length; i++) {
						if (!tempArray[i].children.length) {
							tempArray.splice(i, 1)
							i--
						}
					}
					this.projectArray = tempArray
				})
			},
			
			/** 去进度图表页面 */
			goScheduleChart() {
				this.getScheduleListJudge().then(() => {
					uni.setStorageSync("_temp_line-array", this.getLineArray())
					uni.navigateTo({ url: `/subpackage-overhaul/pages/comprehensiveOverhaul/projectKanBan/scheduleChart?id=${this.getId()}` })
				}).catch(err => {
					uni.showToast({ title: err, icon: "none" })
				})
			},
			
			/** 获取进度列表 -判断 */
			getScheduleListJudge() {
				return new Promise((resolve, reject) => {
					if (!this.getId() || !this.$store.getters.dictMap || !this.$store.getters.dictMap.construction_method) {
						return
					}
					getListByLineSiteSectionId({
						currPage: 1,
						pageSize: 999999,
						params: {
							pmId: this.getId(),
							reviewStatus: 'tg',
							projectId: uni.getStorageSync("isOwner") || undefined,
						},
					}).then(res => {
						// 判断是否有进度图表
						if (res && res.result && Array.isArray(res.result.list)) {
							let data = null
							for (const item of res.result.list) {
								const typeArray = item.constructionMethod.split(',')
								if (!data) {
									const temp = typeArray.find(item1 => ['gh', 'xgh', 'snwrd', 'swwrd'].includes(item1))
									if (temp) {
										data = temp
										break
									}
								}
							}
							if (data) {
								resolve()
								return
							}
						}
						reject('暂无可查看的工作量图表')
					}).catch(() => {
						reject('暂无可查看的工作量图表')
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.schedule-module {
		background: #fff;
		.title-content {
			padding: 24px 20px 10px 12px;
			height: 30px;
			line-height: 30px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.tab-content {
				background: #F4F6F8;
				border-radius: 4px;
				font-size: 16px;
				font-weight: bold;
				color: #9d9eb6;
				display: flex;
				align-items: center;
				border: 1px solid #EDEDED;
				width: 162px;
				text-align: center;
				.tab-item {
					flex: 1;
					&.active {
						color: #2f80ed;
						background: #fff;
					}
				}
			}
			.label {
				color: #2f80ed;
				font-weight: bold;
			}
		}
		.statistics-list {
			padding-bottom: 5px;
			.statistics-item {
				padding: 16px 25px;
				&:nth-child(n + 2) {
					border-top: 2px solid #f5f7fa;
				}
				&.blue-item {
					.item-icon {
						background: linear-gradient(180deg, #7BDDFF 0%, #38C9FC 100%);
					}
					.orange-image, .green-image {
						display: none;
					}
					.schedule-background {
						background: #38C9FC;
					}
				}
				&.orange-item {
					.item-icon {
						background: linear-gradient(180deg, #FDC386 0%, #FBAF69 100%);
					}
					.blue-image, .green-image {
						display: none;
					}
					.schedule-background {
						background: #FBAF69;
					}
				}
				&.green-item {
					.item-icon {
						background: linear-gradient(180deg, #7BF6DA 0%, #0BD4AC 100%);
					}
					.blue-image, .orange-image {
						display: none;
					}
					.schedule-background {
						background: #0BD4AC;
					}
				}
				.item-top {
					display: flex;
					align-items: center;
					.item-icon {
						width: 64px;
						height: 64px;
						display: flex;
						border-radius: 10px;
						margin-right: 14px;
						flex-shrink: 0;
						image {
							width: 21px;
							height: 21px;
							margin: auto;
						}
					}
					.item-data {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.schedule {
							width: 100%;
							height: 4px;
							overflow: hidden;
							background: rgba(47, 128, 237, .1);
							border-radius: 4px;
							.schedule-background {
								height: 100%;
							}
						}
						.text-content {
							display: flex;
							align-items: center;
							justify-content: space-between;
							&:nth-of-type(2) {
								margin-top: 8px;
								> view {
									font-size: 18px;
									font-weight: bold;
									line-height: 25px;
									&:nth-of-type(1) {
										color: #22204e;
									}
									&:nth-of-type(2) {
										color: #576772;
									}
 								}
							}
							&:nth-of-type(3) {
								margin-top: 6px;
								line-height: 20px;
								font-size: 14px;
								font-weight: bold;
								color: #6a819e;
							}
						}
					}
				}
				.item-bottom {
					margin-top: 22px;
					display: flex;
					align-items: center;
					> view {
						flex: 1;
						display: flex;
						flex-direction: column;
						.label {
							line-height: 20px;
							color: #6a819e;
							font-size: 14px;
							font-weight: bold;
						}
						.num {
							margin-top: 5px;
							line-height: 29px;
							color: #425166;
							font-weight: 500;
							font-size: 19px;
							text:nth-of-type(2) {
								font-size: 16px;
								font-weight: bold;
							}
						}
					}
				}
			}
		}
		.everyday-schedule {
			position: relative;
			max-height: 300px;
			overflow-y: auto;
			.select-date {
				position: absolute;
				top: 6px;
				right: 20px;
				height: 32px;
				width: 132px;
				background: #f5f7fa;
				border-radius: 4px;
				padding: 6px 12px;
				box-sizing: border-box;
				color: #425166;
				font-weight: bold;
				font-size: 14px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.gray-label {
					color: #cacaca;
					font-weight: 500;
				}
				image {
					width: 16px;
					height: 16px;
				}
			}
			.schedule-item {
				&:nth-child(n + 3) {
					margin-top: 12px;
				}
				&.blue-item {
					.title::before {
						background: #38C9FC;
					}
				}
				&.orange-item {
					.title::before {
						background: #FBAF69;
					}
				}
				&.green-item {
					.title::before {
						background: #0BD4AC;
					}
				}
				.title {
					line-height: 54px;
					display: flex;
					align-items: center;
					padding-left: 14px;
					font-size: 18px;
					color: #22204e;
					font-weight: bold;
					&::before {
						content: "";
						width: 10px;
						height: 10px;
						margin-right: 8px;
						border-radius: 50%;
					}
				}
				.table {
					font-weight: bold;
					font-size: 16px;
					text-align: center;
					.table-header {
						background: #f5f7fa;
						color: #445469;
						display: flex;
						align-items: center;
						min-height: 50px;
						view {
							padding: 13px;
							flex-shrink: 0;
							&:nth-child(1) {
								text-align: left;
							}
						}
					}
					.table-body {
						display: flex;
						align-items: center;
						color: #686f79;
						line-height: 26px;
						min-height: 50px;
						&:nth-of-type(odd) {
							background: #f5f7fa;
						}
						view {
							padding: 13px;
							flex-shrink: 0;
							&:nth-child(1) {
								text-align: left;
							}
						}
					}
				}
			}
		}
	}
</style>
